
<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <div></div>
</template>

<script setup>
// cSpell:ignore pixi
import { 
  Application, 
  Assets, 
  Container, 
  Rectangle,
  Sprite, 
  Texture
} from 'pixi.js';

(async () =>
{
    // Create a new application
    const app = new Application();

    // Initialize the application
    await app.init({ background: '#ffffff', resizeTo: window });

    // Append the application canvas to the document body
    document.body.appendChild(app.canvas);

    // Create and add a container to the stage
    const container = new Container();

    app.stage.addChild(container);

    // // 添加恐龙游戏的精灵纹理
    const texture  = await Assets.load('/download.png') 
    console.log(texture)
    // 创建恐龙纹理
    // texture = new Rectangle(0, 0, 44, 47);
    const dinoTexture = new Texture(texture.baseTexture, new Rectangle(0, 0, 44, 47));

    // 创建恐龙精灵
    const dino = new Sprite(dinoTexture);
    dino.position.set(200, 150);

    container.addChild(dino)
    
    // Listen for animate update
    // app.ticker.add((time) =>
    // {
    //     // Continuously rotate the container!
    //     // * use delta to create frame-independent transform *
    //     container.rotation -= 0.01 * time.deltaTime;
    // });
})();

</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas{
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
